<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<uni-nav-bar :border="false" left-icon="left" title="找回密码" background-color="#fff" @clickLeft="$nav(2,'')"></uni-nav-bar>
		</view>
		<view style="margin-left: 40rpx;font-size: 30rpx;margin-top: 30rpx;">找回密码</view>
		
		<view class="login_cent_sty">
			<view class="form_item">
				<u-input placeholder="请输入账号" v-model="name" type="text"
					placeholder-style='color: #a5a5a5;' border="bottom"/>
			</view>
			
			<view class="form_item">
				<u-input placeholder="请输入新密码" v-model="password" :clearable='false' type="password"
					placeholder-style='color: #a5a5a5;' :password-icon="true" border="bottom"/>
			</view>
			
			<view class="form_item">
				<u-input type="text" placeholder="请输入验证码" v-model="captcha" :clearable='false'
					placeholder-style='color: #a5a5a5;' border="bottom">
					<template slot="suffix">
						<u-code
							ref="uCode"
							@change="codeChange"
							changeText="X秒重新获取"
						></u-code>
						<u-button
							@tap="get_code"
							:text="tips"
							type="primary"
							size="small"
							shape="circle"
						></u-button>
					</template>
				</u-input>
		
			</view>
			
			<view class="sub_but" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
	import md5 from '../../common/md5.js'
	export default {
		data() {
			return {
				tips: '',
				captcha: '',
				count: 60,
				name: '',
				password:''
			};
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight;
			}
		},
		onLoad() {
		
		},
		methods:{
			codeChange(text) {
				this.tips = text;
			},
			
			submit(){
				if (!this.name) return this.$u.toast("请输入账号");
				if (!this.password) return this.$u.toast("请输入新密码");
				if (!this.captcha) return this.$u.toast("请输入验证码");
				this.$request({
					url:'?c=Login&a=forgotPwd',
					type:'post',
					data:{
						account:this.name,
						password:md5.hex_md5(this.password),
						password_repeat:md5.hex_md5(this.password),
						sms_code:this.captcha
					}
				}).then(res =>{
					this.$u.toast('成功')
					setTimeout(() => {
						this.$nav(2)
					}, 500)
				})
			},
			
			get_code(){
				if (!this.name) return this.$u.toast("请输入账号");
				if(this.$refs.uCode.canGetCode){
					this.$request({
						url: '?c=Setting&a=smsCode',
						type: 'post',
						data: {
							type: 3,
							mobile: this.name,
						}
					}).then(res => {
						setTimeout(() => {
							uni.hideLoading();
							
							// uni.$u.toast('验证码已发送');
							this.$u.toast(res.data)
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					
					})
				}else{
					uni.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
		background-color: #fff;
	}
	.font_s {
		font-size: 28rpx;
	}
	.text_flex{
		display: flex;
		justify-content: space-between;
		color: #d6000f;
		margin-top: 50rpx;
	}
	.get_code_sty {
		color: $u-primary;
	}

	.sub_but {
		text-align: center;
		background-color: $u-primary;
		color: #fff;
		line-height: 80rpx;
		border-radius: 50rpx;
		margin-top: 50rpx;
		margin-left: 35rpx;
		margin-right: 35rpx;
	}

	.checkbox_top {
		margin-top: 40rpx;
	}

	.fon_w {
		font-weight: bold;
	}

	.form_item {
		// align-items: center;
		// display: flex;
		// justify-content: space-between;
		padding: 35rpx;
		// border-bottom: 1rpx solid #ebebeb;
	}

	.login_cent_sty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
	}
</style>
